<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
	</head>
	<body>
		<style>
			/*元素选择器作用于
			1.编辑默认样式
			2.定义全局样式*/
			a{
				text-decoration: none;
			}
			.buy_btn{
				display: inline-block;
				width: 80px;
				padding: 4px 0;
				border: 1px solid #333;
				font-size: 20px;
				color: #ef4238;
				text-align: center;
			}
			
			/*a标签4种状态
			1. link 	链接未访问状态
			2. hover 	鼠标悬停状态
			3. active 	鼠标点击状态
			4. visited 	链接被访问过状态
			正确排列顺序
			lvha*/
			/*当链接被访问过,应用的样式*/
			.buy_btn:visited{
				background-color:#efefef;
			}
			/*当鼠标悬停在上面时，应用的样式*/
			.buy_btn:hover{
				color: #fff;
				background-color:#ef4238 ;
			}
			/*当鼠标点击时，应用的样式*/
			.buy_btn:active{
				background-color:#333 ;
			}
			.ipt{
				color: #000;
			}
			/*输入框得到焦点时，应用的样式*/
			.ipt:focus{
				color: red;
			}
		</style>
		<a href="#" class="buy_btn">
			购票
		</a>
	<input class="ipt" type="text" name="" value="" />
	<style type="text/css">
		.line>li:first-child{
			background: #000;
		}
		
		.line>li:nth-child(2n-1){
			background: #000;
		}
		/*匹配第一个li*/
		.line>li:nth-child(2n){
			background: #fff;
		}
		.line>li:first-of-type{
			/*使用!important 无视后者样式，直接采用此样式*/
			/*万不得已不要滥用!important*/
			background: pink;
		}
		.line>li:nth-of-type(3){
			background: purple;
		}
		/*稍作了解即可*/
		p:lang(en){
			color: red;
		}
		html:root{
			text-align: center;
		}
	</style>
	<ul class="line">
		<p class="line" lang="en">斑马线1</p>
		<li>斑马线2</li>
		<li>斑马线3</li>
		<li>斑马线4</li>
		<li>斑马线5</li>
		<li>斑马线6</li>
		<li>斑马线7</li>
		<li>斑马线8</li>
		<li>斑马线9</li>
		<li>斑马线10</li>
	</ul>
	
	</body>
</html>
